<template>
	<div id="backcont">
		<!-- logo box -->
		<div class="meituan-content">
			<div class="login-cont">
				<div class="meituan-title">扫码点餐商户端</div>
				<div class="meituan-user">
					<p>账号</p>
					<el-input class="inptflex" v-model="username" placeholder="请输入账号"></el-input>
				</div>
				<div class="meituan-user">
					<p>密码</p>
					<el-input class="inptflex" v-model="password" placeholder="请输入密码" show-password></el-input>
				</div>
				<!-- 注册转换 -->
				<div class="reg-view" @click="regiBtn()">{{regi}}</div>
				<!-- 登录或注册 -->
				<el-button v-if="regi == '注册'" type="success" class="meituan-btn" @click="signin()" :loading="load" :disabled="load">登录</el-button>
				<el-button v-else type="success" class="meituan-btn" @click="register()" :loading="load" :disabled="load">注册</el-button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  data() {
    return {
      regi:'注册',
      username: "18339632610",
      password: "liuxuhui610",
      load: false,
    };
  },
  methods: {
    regiBtn(){
      this.regi = this.regi == '登录' ? '注册' : '登录'
		},
    // 注册
		async register(){
      alert('功能未完善，尽情期待哦！')
			// this.load = true
			// let obj = {account:this.account,password:this.password}
			// try{
			// 	let res = await new this.Request(this.Urls.m().register,this.$qs.stringify(obj)).modepost()
			// 	if(res.status != 200){
      //     this.Message_Box.MessageError("发生错误，请重新尝试");
			// 	}else if(res.status == 200){
			// 		this.regi = '注册'
      //     this.Message_Box.MessageSuccess("恭喜你，注册成功");
			// 	}
			// }catch(e){
      //   this.Message_Box.MessageError("发生错误，请重新尝试");
			// }
      // this.load = false
		},
    // 登录
    async signin() {
      this.load = true
      let obj = { username: this.username, password: this.password };
      try {
        let res = await new this.request(this.URL.m().login, JSON.stringify(obj)).POST();
        if (res.status !== 200) {
          // 提示框
          this.Message_Box.MessageError("登录失败");
        } else if (res.status == 200) {
          // nuvmenuid ids = 1
          localStorage.setItem("token", res.data.data.token); // 存储token
          this.Message_Box.MessageSuccess("登录成功");
          // 查询商家数据库
          let infor = await new this.request(this.URL.m().obtainshop).GET();
          if (infor.data.data.data.length == 0) {
            this.$router.push({ name: "modify-infor" });
          } else {
            localStorage.setItem("company", infor.data.data.data[0]);
            this.$router.push({ name: "store" });
          }
        }
      } catch (e) {
        this.Message_Box.MessageError("程序错误，请重新尝试");
      }
      this.load = false
    },
  },
};
</script>

<style scoped="scoped">
#backcont {
	background-image: url(../../assets/images/beijing.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	min-height: 100vh;
}
.meituan-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.login-cont {
	width: 500px;
	height: 300px;
	background: #f9de80;
	border-radius: 5px;
}
.meituan-title {
	text-align: center;
	color: #000000;
	font-size: 30px;
	padding-top: 30px;
	font-family: Arial, Helvetica, sans-serif;
}
.meituan-user {
	width: 400px;
	margin: 0 auto;
	padding-top: 30px;
	height: 40px;
	display: flex;
	align-items: center;
}

.meituan-user p{width: 50px; color: #000000;
font-size:16px;
}

.inptflex{flex: 1;}

.reg-view{
	width: 400px;
	display: flex;
	justify-content: flex-end;
	margin: 0 auto;
	padding-top: 10px;
	cursor:pointer;
}

.meituan-btn {
	width: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 20px auto 0 auto;
	font-size: 16px;
}
</style>
